<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-col>
          <el-menu active-text-color="#ffd04b" background-color="#545c64"
                   class="el-menu-vertical-demo" default-active="0"
                   text-color="#fff" @select="handleSelect">
            <el-menu-item index="0" id="0">
              <el-icon>
                <icon-menu/>
              </el-icon>
              <span>文档列表</span>
            </el-menu-item>
            <el-menu-item index="1" id="1">
              <el-icon>
                <icon-menu/>
              </el-icon>
              <span>新增文档</span>
            </el-menu-item>
            <el-menu-item index="2" id="2">
              <el-icon>
                <icon-menu/>
              </el-icon>
              <span>编辑文档</span>
            </el-menu-item>
            <el-menu-item index="3" id="3">
              <el-icon>
                <icon-menu/>
              </el-icon>
              <span>查看文档</span>
            </el-menu-item>

          </el-menu>
        </el-col>
      </el-aside>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>
<script setup>
import {Menu as IconMenu} from '@element-plus/icons-vue'
import router from "@/router";
import {onMounted} from "vue";
import {provide} from "vue";

const path = [
  '/document/list',
  '/document/add',
  '/document/edit',
  '/document/show'
]

const linkTo = (idx) => {
  if (0 <= idx <= 3) {
    router.push(path[idx])
    document.getElementById('' + idx).click()
  }
}

provide('linkTo', linkTo)

const handleSelect = (key) => {
  router.push(path[key])
}
onMounted(() => {
  handleSelect(0)
})
</script>

<style scoped>

</style>